<template>
    <div>
        <el-page-header content='模块详情' @back='$router.back()'></el-page-header>
        <el-form label-width="160px" :model='formData' :rules='rules' ref='form'>
            <el-form-item label="模块名称" prop='title'>
                <el-input v-model='formData.title'></el-input>
            </el-form-item>
            <el-form-item label="模块类型" prop='decorate_module'>
                <o-select code='DECORATE_MODULE' v-model='formData.decorate_module' :lazy='false'></o-select>
            </el-form-item>
            <el-form-item label="模块广告图" v-if="isProductModule">
                <o-upload v-model="formData.img_url"></o-upload>
            </el-form-item>
            <el-form-item label="每行显示多少个商品" v-if="isProductModule">
                <el-select v-model="formData.row_number">
                    <el-option :value='1' label="每行显示1个"></el-option>
                    <el-option :value='2' label="每行显示2个"></el-option>
                    <el-option :value='3' label="每行显示3个"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模块广告图链接" v-if="isProductModule">
                 <el-input v-model='formData.link_url'></el-input>
            </el-form-item>
        </el-form>
        <el-divider content-position='left' >
            <el-button type='primary' @click='createElement'>添加模块元素</el-button>
        </el-divider>
        <!-- 添加商品 -->
        <el-table
            v-if="isProductModule"
            :data="formData.decorate_json"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column prop='id' label='商品编号'></el-table-column>
            <el-table-column prop='title' label='商品名称'>

            </el-table-column>
            <el-table-column prop='type_name' label='产品图片' width="80">
                <template v-slot='scope'>
                   <el-image 
                        style="width: 50px; height: 50px"
                        :src="scope.row.img_url" 
                        :preview-src-list="[scope.row.img_url]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop='status' label='排序'>
                <template v-slot='scope'>
                    <el-input v-model='scope.row.sort' type='number'></el-input>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-button type='text' @click='deleteElement(scope.row)'>删除元素</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 其他木块类型 -->
        <el-table
            v-else
            :data="formData.decorate_json"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column prop='type_name' label='元素图片'>
                <template v-slot='scope'>
                    <o-upload v-model='scope.row.img_url' :width='60'></o-upload>
                </template>
            </el-table-column>
            <el-table-column prop='status' label='链接'>
                <template v-slot='scope'>
                    <el-input v-model='scope.row.link_url'></el-input>
                </template>
            </el-table-column>
            <el-table-column prop='status' label='排序'>
                <template v-slot='scope'>
                    <el-input v-model='scope.row.sort' type='number'></el-input>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-button type='text' @click='deleteElement(scope.row)'>删除元素</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form label-width="120px" style="margin-top:10px">
            <el-form-item>
                <el-button @click="confirm" type='primary'>保存设置</el-button>
            </el-form-item>
        </el-form>
        <!-- 商品选择 -->
        <product-select ref='productSelect'></product-select>
    </div>
</template>

<script>
    import {toast,formCheck} from '@u';
    import { nanoid } from 'nanoid';
    import productSelect from '../../components/product-select.vue';
    import {MISS_REQUIRE_FORM_MESSAGE} from '@const';
    import lodash from 'lodash'
    export default {
        components : {
            productSelect
        },
        data () {
            return {
                formData : {
                    title : null,//模块名称
                    decorate_module : 'PRODUCT',//模块类型
                    decorate_json : [],//模块内容
                    img_url : null,//模块广告图
                    link_url : null,//广告图链接
                    background_color : null,//背景颜色
                    row_number : 1,//每行数量
                    page_id : Number(this.$route.query.page_id),//关联的页面id,
                },
                rules : {
                    title : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    decorate_module : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                }
            }
        },
        watch : {
            'formData.decorate_module' : function (n) {
                this.formData.decorate_json = [];
                this.formData.img_url = null;
                this.formData.link_url = null;
            }
        },
        computed : {
            isProductModule () {
                return this.formData.decorate_module == `PRODUCT`
            }
        },
        created () {
            if (this.$route.params.id) {
                this.formData = JSON.parse(this.$route.query.data)
            }
        },
        methods : {
            //创建元素
            createElement () {
                if (!this.formData.decorate_module) {
                    toast('请先选择模块类型', 'error');
                    return;
                }

                if (this.formData.decorate_module == `PRODUCT`) {
                    this.$refs.productSelect.doShow({
                        success : res => {
                            this.formData.decorate_json = lodash.uniqBy([...this.formData.decorate_json, ...res], 'id');
                            // console.log(res);
                        }
                    });
                } else {
                    this.formData.decorate_json = [...this.formData.decorate_json, {
                        img_url : null,
                        link_url : null,
                        sort : null,
                        _renderId : nanoid()
                    }]
                }
            },
            confirm () {
                formCheck(this.$refs.form).then(_ => {
                    if (!this.formData.decorate_json.length) {
                        toast('请至少为模块添加一个元素', 'error')
                        return;
                    }

                    let api = this.formData.id ? this.__api.contentApi.decorateModuleUpdate : this.__api.contentApi.decorateModuleCreate;

                    api(this.formData).then(_ => {
                        toast('操作成功');
                        this.$router.back();
                    })

                }).catch(_ => {
                    toast('请填写模块名称/模块类型', 'error')
                })
            },
            //删除元素
            deleteElement (row) {
                if (row._renderId) {
                    this.formData.decorate_json = this.formData.decorate_json.filter(item => item._renderId != row._renderId)
                } else {
                    this.formData.decorate_json = this.formData.decorate_json.filter(item => item.id != row.id)
                }
            }
        }
    }
</script>

<style>

</style>